.header {
  padding: 0.5rem;
  justify-content: center;
  gap: 0.625rem;
}

.header .content {
  padding: 9rem 0 4rem 0;
  height: 100vh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0) 50%), /* bal oldali árnyék */
	linear-gradient(0deg, rgba(0, 0, 0, 0) 50.34%, var(--color-black) 100%), /* alulról */
	linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), /* sötét overlay */
	url(/images/landing_header.jpg);
  background-size: cover;
  border-radius: 1rem;
  gap: 4rem;
}

.hero-header {
  padding: 0rem 4rem;
  align-content: flex-start;
  gap: 0.625rem;
  height: 100vh;
}

.hero-header .container {
  max-width: 80rem;
  align-items: flex-end;
  row-gap: 4rem;
  flex: 1 0 0;
  color: var(--color-white);
  height: 100%;
}

.hero-header .text-content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero-header .text {
  align-items: flex-start;
  align-self: flex-start;
  gap: 3rem;
  width: 48%;
}

.hero-header .numbers {
  padding: 1.5rem;
  gap: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey-500, #535353);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(25px);
}

.header .numbers .body-s {
  margin: auto 0;
}

.gold-div {
  background-image: url(/images/orange_bg.png), url(/images/orange_bg.png);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: calc(50% - 800px + 1696px) 0px, calc(50% - 800px - 600.257px) 85.859px;
  background-attachment: local, local;
  display: flex;
  padding: 6rem 4rem 0 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  align-self: stretch;
  background-color: #FFF;
}

.gold-div.black {
  background: none;
}

.gold-div .container {
  display: flex;
  max-width: 80rem;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  align-self: stretch;
  margin: auto;
}

.gold-image {
  border-radius: 0.625rem;
  border: 4px solid var(--color-grey-600);
}

.simple-image.landing-buy {
  display: flex;
  padding: 2rem 41.125rem 24.23256rem 2rem;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.75) 100%), url(/images/landing_buy.jpg) lightgray -17.778px -22.853px / 106.015% 112.856% no-repeat;
  height: 28.125rem;
}

.image-label-container {
  position: relative;
  width: 100%;
}

.label-group {
  position: absolute;
  top: 3.88rem;
  left: 22.625rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: disc;
  padding-left: 0.5rem;
}

.label-group .label {
  display: flex;
  padding: 0.25rem 0.75rem 0.25rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  backdrop-filter: blur(25px);
}

.label-group .label.text-grey-500 {
  border: 0.5px solid var(--color-grey-500);
  background: rgba(255, 240, 227, 0.50);
}

.label-group .label.text-orange-300 {
  border: 0.5px solid var(--color-orange-300);
  background: rgba(253, 173, 102, 0.05);
}

.label-group .label.text-orange-500 {
  border: 0.5px solid var(--color-orange-500);
  background: rgba(253, 145, 51, 0.05);
}

.label-group .label.text-orange-600 {
  border: 0.5px solid var(--color-orange-600);
  background: rgba(255, 119, 0, 0.05);
}

.gold-div .label-group .icon {
  width: 8px;
  height: 8px;
}

.hero-image {
  display: flex;
  min-height: 28.125rem;
  padding: 0.5rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), linear-gradient(245deg, rgba(0, 0, 0, 0.00) 46.72%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), url(/images/landing_handshake.jpg) lightgray 50% / cover no-repeat;
  box-shadow: 0px 12px 16px -4px rgba(40, 40, 40, 0.08), 0px 4px 6px -2px rgba(40, 40, 40, 0.03);
}

.image-card {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--color-grey-500);
  backdrop-filter: blur(50px);
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  gap: 1rem;
}

.image-card img {
  max-width: 3.5rem !important;
  max-height: 3.5rem;
  background: none !important;
}

.image-card .text {
  margin-top: 20px;
}

.image-card .text span {
  margin-top: 10px;
  color: var(--color-white);
}

.features-section.background-grey-100-to-white .features-div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/lines_pattern_bg.png) -450% -600% / 86.818% 103.115% no-repeat, linear-gradient(180deg, #F2F2F2 0%, #FFF 100%);
  z-index: -1;
  pointer-events: none;
}

.steps-div {
  display: flex;
  max-width: 28.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 28rem;
}

.steps div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  margin: 0;
  gap: 1.25rem;
}

.steps div .body-l,
.steps div .body-s {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.steps div .body-l {
  padding: 8px 19px;
  margin: 0;
  gap: 10px;
  background-color: var(--color-white);
  border: 0.5px solid var(--color-grey-200);
  border-radius: 8px;
  color: var(--color-orange-600);
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

.tudastar {
  padding: 6rem 4rem;
}

.tudastar::after {
  content: "";
  position: absolute;
  inset: 0;
  max-width: 1920px;
  margin: 0 auto;
  background: url(/images/lines_pattern_bg.png) -558.99px 427.511px / 132.08% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}

.collage {
  min-height: 574px;
  width: unset !important;
}

.landing .blog-collection {
  padding: 0;
}

.hero-header .container .frame-30 {
  gap: 1.5rem;
}

.feature-card-icon-container .icon{
  min-width: 48px;
  height:58px
}

@media(max-width: 1230px) {

  .gold-div {
	padding: 0 1rem;
	align-items: flex-start;
	gap: 2rem;
	background-image: none;
	margin-top: 0;
  }

  .gold-div .container {
	display: flex;
	max-width: 80rem;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	align-self: stretch;
	margin: auto;
  }

  .label-group {
	position: static;
	margin-top: 1rem;
	justify-content: center;
  }

}

@media screen and (max-width: 1230px) {
  .tudastar::after, .features-section.background-grey-100-to-white .features-div::after  {
	background: none;
  }
}

@media screen and (max-height: 850px) {
  .lg\:heading-1 {
	font-size: 32px !important;
  }
  .lg\:body-l {
	font-size: 18px !important;
  }
  .lg\:button-m {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 100% !important;
	letter-spacing: .5px !important;
  }
}

@media screen and (max-width: 769px) {

  .hero-header .container .frame-30 {
	gap: 0.75rem;
  }

  .hero-header .text {
	width: 100%
  }

  .header .content {
	background-image: none;
	background: url(/images/lines_pattern.png) -857.25px 611.031px / 415.195% 52.224% no-repeat, rgba(40, 40, 40, 1);
	gap: 0;
	align-items: center;
	padding: 7.5rem 0 0 0;
	height: auto;
  }

  .hero-header {
	padding: 0;
	align-items: center;
	justify-content: flex-end;
	height: auto;
  }

  .hero-header .container {
	align-items: center;
	gap: 2rem;
	padding: 0 1rem 2.5rem 1rem;
  }

  .hero-header .container .text {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	align-self: stretch;
  }

  .contact {
	flex-direction: column;
  }

  .contact div {
	display: flex;
	width: 100%;
	justify-content: center;
  }

  .contact div .button {
	justify-content: center;
  }

  .hero-header .numbers {
	flex-direction: column;
	width: 95%;
	padding: 10px;
	margin: auto;
	margin-bottom: 0;
	align-items: flex-start;
  }

  .hero-header .businessman {
	width: 100%;
	background-repeat: no-repeat;
  }

  .hero-header .businessman-mobile {
	display: flex;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 50%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(/images/landing_header.jpg) black -248.526px -49.48px / 199.417% 82.31% no-repeat;
	background-size: cover, cover, 150%;
	background-position-x: center;
	background-repeat: no-repeat;
	margin: auto;
	height: 34.625rem;
	padding: 0.5rem;
	justify-content: space-between;
	align-items: flex-end;
	align-content: flex-end;
	align-self: stretch;
	border-radius: 0.5rem;
	box-shadow: 0px 12px 16px -4px rgba(40, 40, 40, 0.08), 0px 4px 6px -2px rgba(40, 40, 40, 0.03);
  }

  .hero-header .numbers {
	display: flex;
	padding: 1rem;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	flex: 1 0 0;
  }

  .tudastar {
	background: url(/images/lines_pattern_bg.png) -1232.045px 1262.439px / 561.196% 40.107% no-repeat;
	padding: 2.5rem 1rem;
  }

  .simple-image.landing-buy {
	height: 25rem;
	padding: 0.5rem;
	background: linear-gradient(241deg, rgba(0, 0, 0, 0.00) 46.35%, rgba(0, 0, 0, 0.50) 99.96%), url(/images/landing_buy.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
  }

}

@media(max-width: 460px) {
  .hero-header .businessman-mobile {
	background-size: cover, cover, 150%;
  }
}

@media(min-width: 1231px) {
  .gold-image {
	display: flex;
	content: url('/images/mac-book.png');
	border: none;
  }
}

@media(min-width: 768px) {
  .collage {
	content: url('/images/collage.png');
  }
}